
<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :inline="true" :model="matchList" class="demo-form-inline">
    <el-form-item label="比赛" >
      <el-input v-model="matchList.name" placeholder="名称" ></el-input>
    </el-form-item>

    <el-form-item label="类型">
      <el-select v-model="matchList.type" placeholder="类型">
        <el-option v-for="item in typelist" :key="item.matchId" :label="item.matchType" value="item.matchId"></el-option>
      </el-select>
    </el-form-item>



    <el-form-item label="等级">
      <el-select v-model="matchList.lever" placeholder="等级">
        <el-option label="国家级" value="guojiaji"></el-option>
        <el-option label="省级" value="shengji"></el-option>
        <el-option label="市级" value="shiji"></el-option>
        <el-option label="校级" value="xiaoji"></el-option>
        <el-option label="院级" value="yuanji"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item label = "开始日期">
        <el-date-picker
        v-model="matchList.begin"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

<el-form-item label = "结束日期">
        <el-date-picker
        v-model="matchList.end"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>

    <!-- 列表 -->
      <!-- isDeleted: "0"
matchBrief: "1"
matchCollection: "1"
matchConcern: "1"
matchEnd: "2021-02-18 00:39:57"
matchId: "1"
matchImage: "1"
matchJoined: "1"
matchLevel: "1"
matchName: "1"
matchRead: "1"
matchStart: "2021-02-18 00:39:59"
matchType: "1" -->
     <el-table
    :data="matchListData"
    border
    style="width: 100%">
    <el-table-column prop="matchName" label="名称" width="200" show-overflow-tooltip />
      <el-table-column prop="matchImage" label="图片" width="120">
        <template slot-scope="scope">
          <el-image
            style="width: 100%;height: 100px"
            :src="scope.row.matchImage"
            :preview-src-list="[scope.row.matchImage]"
          />
        </template>
      </el-table-column>
      <el-table-column prop="matchLevel" label="等级" width="150" sortable="custom" />
      <el-table-column prop="matchType" label="类型" width="150" />
      <el-table-column prop="matchBrief" label="简介" width="200"  />
      <el-table-column prop="matchRead" label="阅读量" width="100" sortable="custom" />
      <el-table-column prop="matchJoined" label="报名量" width="100" sortable="custom" />
      <el-table-column prop="matchConcern" label="关注量" width="100" sortable="custom" />
      <el-table-column prop="matchCollection" label="收藏量" sortable="custom" />
      <el-table-column prop="matchStart" label="开始时间" sortable="custom" />
      <el-table-column prop="matchEnd" label="结束时间" sortable="custom" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown>
            <el-button type="primary" size="mini">
              操作
              <i class="el-icon-arrow-down el-icon--right" />
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="handleEdit(scope.row.blogId)">编辑</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="primary" @click="toRead(scope.row.blogId)">查看</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button size="mini" type="danger" @click="handleDelete(scope.row.blogId)">删除</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
  </el-table>

    <!-- 分页 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[10, 20, 30, 40]"
      :page-size=size
      layout="total, sizes, prev, pager, next, jumper"
      :total=total>
    </el-pagination>

    <!-- 添加弹窗 -->


    <!-- 阅读弹窗 -->


    <!-- 修改弹窗 -->

  </div>

</template>


<script>

import matchApi from '@/api/match'
import typeApi from '@/api/type'

  export default {
    data() {
      return {
        typelist: null,
        total: '',
        current: 1,
        size: 10,
        matchList: {
          name: '',
          lever: '',
          begin: '',
          end: '',
          type: '',
        //   value: [],
        // type: [{
        //   value: 'gongke',
        //   label: '工科',
        //   children: [{
        //     value: 'jisuanji',
        //     label: '计算机',
        //     children: [{
        //       value: 'suanfa',
        //       label: '算法'
        //     }, {
        //       value: 'ruanjiankaifa',
        //       label: '软件开发'
        //     }, {
        //       value: 'qianrushi',
        //       label: '嵌入式'
        //     }]
        //   }, {
        //     value: 'daohang',
        //     label: '数学',
        //     children: [{
        //       value: 'shuxuejianmo',
        //       label: '数学建模'
        //     }, {
        //       value: 'dingbudaohang',
        //       label: '其他'
        //     }]
        //   }]
        // },{
        // value: 'shenahng',
        //   label: '沈航',
        //   children: [{
        //     value: 'jisuanjixueyuan',
        //     label: '计算机学院',
        //     children: [{
        //       value: 'jike',
        //       label: '计科'
        //     }, {
        //       value: 'ruanjiangongcheng',
        //       label: '软件工程'
        //     }, {
        //       value: 'wangluogongcheng',
        //       label: '网络工程'
        //     }, {
        //       value: 'wulianwanggongcheng',
        //       label: '物联网工程'
        //     }]
        //   }, {
        //     value: 'daohang',
        //     label: '人工智能学院',
        //     children: [{
        //       value: 'xinguan1ban',
        //       label: '信管1班'
        //     }, {
        //       value: 'xinguan2ban',
        //       label: '信管2班'
        //     }]
        //   }]
        // }],
        },
        matchListData: []
      }
    },
    methods: {
      //获取所有博客
      getAllType() {
        typeApi.getTypeList()
        .then(res=> {
          this.typelist = res.data.matchList
          console.log("matchList", res.data.matchList)
        })
        .catch()
      },
      //提交方法
      onSubmit() {
        matchApi.getMatchList(this.current, this.size, this.matchList)
        .then(
          res=> {
            this.matchListData = res.data.records
            this.total = res.data.total
            console.log("成功！", res.data)
          }
        )
        .catch()
        console.log('submit!',this.matchList);
      },
      // handleChange(value) {
      //   console.log(value);
      // }
      handleEdit() {

      },
      toRead() {

      },
      handleDelete() {
        
      },
      handleCurrentChange() {
        
      }
    },
    created() {
      this.getAllType()
      this.onSubmit()

    }
  }
</script>
